<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="../base.jsp" %>
	<style>
	.content-wrapper{margin-left: 0px}
		.error{color:red;font-weight: 500;}
		.external-event{  
		  cursor: pointer;
		}
		.hide11{display: none;}
		.dd{background: #DDD;}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
			          <div class="box">
			            <!-- /.box-header -->
			            <div class="box-body" style="overflow-x: auto;">
			              <table class="table table-bordered" id="mytable">
			              </table>
			            </div>
			            <!-- /.box-body -->
			            <div class="box-footer" style="text-align: center;">
			                <a class="btn btn-warning" id="cancel1">关闭</a>
			           </div>
			          </div>
				</div>
			</section>
		</div>
	</div>
<script src="${url }js/echarts.min.js"></script>
<script src="${url }js/anly_chart.js"></script>
<script type="text/javascript">
//var viewjson = eval("("+"${viewjson}"+")")

function viewtabe(){
	var viewrows = ${viewrows};
	var viewcols = ${viewcols};

	var html = "";
	var n = 0;
	for (var i = 0; i < viewrows; i++) {
		html += "<tr>";
		for (var j = 0; j < viewcols; j++) {
			n++;
			html += "<td class=\"\"><div id=\"chart_"+n+"\" style=\"width: 350px;height: 200px\"></div></td>";
		}
		html += "</tr>";
	}
	$("#mytable").html(html);
}

function viewport(){
	var viewarray = ${viewjson};
	var viewrows = ${viewrows};
	var viewcols = ${viewcols};

	console.dir(viewarray[1].charttype);
	
	var html = "";
	var n = 0;
	for (var i = 0; i < viewrows; i++) {
		for (var j = 0; j < viewcols; j++) {
			n++;
			var myChart = echarts.init(document.getElementById('chart_'+n));
			if(null == viewarray[n] || viewarray[n] == ''){
				
			}else{
				var charttype = viewarray[n].charttype;
				var chartName = viewarray[n].chartname;
				var typename = "";
				console.dir(viewarray[n].xdata);
				console.dir(viewarray[n].ydata);
				if(charttype == 1){
					var xdata = viewarray[n].xdata.split(",");
					var ydata = viewarray[n].ydata.split(",");
					
					zhuzhuang(chartName,xdata,ydata); 
					myChart.setOption(zhu_option);
				}else if(charttype == 2){
					var dataname = [''];
					var xdata = viewarray[n].xdata.split(",");
					var ydata = viewarray[n].ydata.split(",");
					zhexian(chartName,dataname,xdata,ydata);
					myChart.setOption(zhexian_option);
				}else if(charttype == 3){
					var bing_dataAxis = [''];
					var bing_data = eval("("+viewarray[n].piedata+")");;
					bingtu(chartName,bing_dataAxis,bing_data);
					myChart.setOption(bing_option);
				}else{
					var dataAll = new Array();
					dataAll[0] = eval(viewarray[n].scatterdata);
					sandian(chartName,dataAll);
				   myChart.setOption(sandian_option);
				}
			}
		}
	}
}
$(function () {
	viewtabe();
	viewport();
	 
	$("#cancel1").on("click",function(){
		parent.layer.closeAll();
	})
});
</script>
</body>
</html>
